<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>USER TABLE</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport"
	content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../../Res/LayUI/css/layui.css" media="all">
<script type="text/javascript" src="../../js/jquery-1.10.2.js"></script>
<style type="text/css">
img{
	width:40px;
	height: 40px;
}
.invisible {
  height: .5rem;
  top: .7rem;
}
.visible {
  height: .8rem;
  top: .55rem;
}
</style>
</head>
<body>
	<div class="demoTable">
		角色名：
		<div class="layui-inline">
			<input class="layui-input" id="namemod">
		</div>
		<button class="layui-btn" data-type="reload">搜索</button>
		<button class="layui-btn layui-btn-primary" onclick="add();">添加</button>
	</div>
	<table class="layui-table"
		lay-data="{width: 1220,url:'../../roleAction/showList.action', page:true, id:'idTest'}"
		lay-filter="demo">
		<thead>
			<tr>
				<th lay-data="{type:'checkbox', fixed: 'left'}"></th>
				<th lay-data="{field:'roleId', width:80, sort: true, fixed: true, align:'center'}">ID</th>
				<th lay-data="{field:'roleName', width:95, align:'center'}">角色名称</th>
				<th lay-data="{field:'roleCode', width:95, align:'center'}">角色编码</th>
				<th lay-data="{field:'roleDesc', width:100, align:'center'}">角色说明</th>
				<th lay-data="{field:'oper', width:90, align:'center'}">操作人</th>
				<th lay-data="{fixed:'right', width:135, align:'center', toolbar: '#barDemo'}">操作</th>
			</tr>
		</thead>
	</table>
	<script type="text/html" id="barDemo">
		<a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
		<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>
	<script src="../../Res/LayUI/layui.js" charset="utf-8"></script>
	<script>
		layui.use('table', function() {
			var table = layui.table;
			//监听表格复选框选择
			table.on('checkbox(demo)', function(obj) {
				console.log(obj)
			});
			
			
			//监听工具条
			table.on('tool(demo)', function(obj) {
				var data = obj.data;
				if (obj.event === 'del') {
					layer.confirm('确定删除该用户吗？', function(index) {
						layer.close(index);
						var id = data.roleId;
						var url = "../../roleAction/delete";
						var datas = {
							'roleId' : id
						};
						$.ajax({
							asyn : true,
							type : "POST",
							url : url, 
							data : datas,
							success : function(msg) {
								if (msg.state == 1) {
									 layer.msg("增加成功");
									table.reload('idTest');
								} else {
									 layer.msg("增加成功");
									table.reload('idTest');
								}
							},
							error : function(fh) {
								layer.msg(msg.msg);
							}
						});
					},"json");
				} else if (obj.event === 'edit') {
					$.ajax({
						asyn : true,
						type : "POST",
						url : "../../moduleAction/showModule",
						success : function(msg) {
							var str='<form id="Tj" action="../../roleAction/updateRole.action" method="post" >'
								+'<input type="hidden" id="modId" name="checkName">'
								+'<input type="hidden" name="roleId" value='+data.roleId+'>'
								+'角色名：<input type="text" name="roleName" id="roleName" lay-verify="title" placeholder="请输入角色名" value='+data.roleName+' class="layui-input" maxlength="9" ><br/>'
								+'编码号：<input type="text" name="roleCode" id="roleCode" value='+data.roleCode+' placeholder="请输入编码号" lay-verify="title" class="layui-input" maxlength="9" ><br/>'
								+'角色说明：<input type="text" name="roleDesc" id="roleDesc" value='+data.roleDesc+' lay-verify="title" placeholder="请输入角色说明" class="layui-input" maxlength="9" ><br/>'
								+'操作人：<input type="text" name="oper" id="oper" placeholder="请输入操作人姓名" value='+data.oper+' class="layui-input" maxlength="9" ></br>';
								for(var i=0;i<msg.length;i++){
									str+="<input type='checkbox' name='RoleModule' value="+msg[i].modId+">"+msg[i].modName;
								}
								str+='</br><input id="update" type="button" value="保存" align="center">'
								+'</form>';
								
							layer.msg(str,{
						        time: 200000000,
						        btn: ['取消操作']
							},"json");
							$.post("../../moduleAction/selectModule",{"roleId":data.roleId},function(module){
								
								for(var i=0;i<module.length;i++){
									$("input[name='RoleModule']").each(function(){
										if($(this).val()==module[i].modId){
											$(this).prop('checked',true);
										}
										
									});
								}
									
							},"json");
							$("#update").click(function(){
								var str="";
								$("input[name='RoleModule']").each(function(){
									if($(this).is(":checked")){
										str+=$(this).val()+"_";
									}
								});
								$("#modId").val(str);
								$("#Tj").submit();
								 layer.msg("修改成功");
							})
						},
						error : function(fh) {
							layer.msg("error");
						}
					});
				}
			});
			var $ = layui.$, active = {
				reload : function() {
					//执行重载
					table.reload('idTest', {
						where : {
							'roleName' : $("#namemod").val(),
							
						},
						page : {
							curr : 1
						}
					});
				}
			};
			$('.demoTable .layui-btn').on('click', function() {
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
		});
		
		function add() {
		$.post("../../moduleAction/showModule.action",function(msg){
			var htmlStr='<form id="tijiao" action="../../roleAction/addRole" method="post">'
				+'<input type="hidden" id="modId" name="checkName">'
				+'角色名：<input type="text" name="roleName" id="roleName" lay-verify="title" placeholder="请输入角色名" class="layui-input" maxlength="9" ><br/>'
				+'编码号：<input type="text" name="roleCode" id="roleCode" placeholder="请输入编码号" lay-verify="title" class="layui-input" maxlength="9" ><br/>'
				+'角色说明：<input type="text" name="roleDesc" id="roleDesc" lay-verify="title" placeholder="请说明角色" class="layui-input" maxlength="9" ><br/>'
				+'操作人：<input type="text" name="oper" id="oper" placeholder="请输入操作人姓名" class="layui-input" maxlength="9" ></br>';
			
			for(var i=0;i<msg.length;i++){
				htmlStr+='<input type="checkbox" name="module" value="'+msg[i].modId+'" title="写作">'+msg[i].modName;
			}
			
			htmlStr+='<input type="button" id="add" value="保存" align="center">'
				+'</form>';
				
			layer.msg(htmlStr,{
				        time: 200000000, 
				        btn: ['取消操作']
			});
			
			$("#add").click(function(){
				var str="";
				$("input[name='module']").each(function(){
					if($(this).is(":checked")){
						str+=$(this).val()+"_";
					}
				});
				$("#modId").val(str);
				 $("#tijiao").submit();
				 layer.msg("增加成功");
			})
			
		},"json");
		
		
	}
	
	</script>
</body>
</html>